const webpack = require('webpack');
const merge = require('webpack-merge');
const base = require('./webpack.base.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const optimizeCss = require('optimize-css-assets-webpack-plugin');	//压缩css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");  //单独打包css文件
const TerserPlugin = require('terser-webpack-plugin');


const path = require('path');

module.exports = merge(base, {
    devtool: 'inline-source-map',
    mode: 'production',
    plugins: [
        new UglifyJSPlugin(),
       
        new optimizeCss({
            assetNameRegExp: /\.css$/g,
            cssProcessorOptions: {
                safe: true,
                autoprefixer: { disable: true }, // 这里是个大坑，稍后会提到
                mergeLonghand: false,
                discardComments: {
                    removeAll: true // 移除注释
                }
            },
            canPrint: true
        }),
        new MiniCssExtractPlugin({
            filename:'css/[name].[chunkhash:8].css',
            chunkFilename: 'css/[name].[chunkhash:8].css',
        }),
    ],
    // optimization: {
    //     minimize: true,
    //     nodeEnv: process.env.NODE_ENV,
    //     splitChunks: {
    //         chunks: 'all',
    //         minSize: 30000,
    //         maxSize: 0,
    //         minChunks: 1,
    //         maxAsyncRequests: 5,
    //         maxInitialRequests: 3,
    //         automaticNameDelimiter: '--',
    //         automaticNameMaxLength: 30,
    //         name: true,
    //         cacheGroups: {
    //             vendors: {
    //                 test: /[\\/]node_modules[\\/]/,
    //                 priority: -10
    //             },
    //             default: {
    //                 minChunks: 2,
    //                 priority: -20,
    //                 reuseExistingChunk: true
    //             }
    //         }
    //     }
    // }

    optimization: {
        minimize: true,
        nodeEnv: process.env.NODE_ENV,
        splitChunks: {
            /*
             *chunks属性用来选择分割哪些代码块，可选值有：'all'（所有代码块），'async'（按需加载的代码块），'initial'（初始化代码块）
             *initial：告诉webpack，将动态导入的文件和非动态导入的文件分别打包，如果一个模块被动态引入，也被非动态引入。那么这个模块将会被分离2次。被分别打包到不同的文件中。
             *  */
            chunks: 'all',
            minSize: 120 * 1024, // 抽离体积大于120kb的chunk
            minChunks: 2, // 抽离被多个入口引用次数大于等于1的chunk
            automaticNameDelimiter: '--', // 分包打包生成文件的名称的连接符
            cacheGroups: { //  cacheGroups 缓存组，如：将某个特定的库打包
                /* 抽离node_modules下的第三方库 可视需要打开会生成两个文件  vender: node-module下的文件*/
                vendor: {
                    chunks:'all',
                    name:'vender',
                    test: (module, chunks) => {
                        if (/node_modules/.test(module.context)) {
                            return true
                        }
                    },
                    minChunks: 2,//  提取公共部分最少的文件数
                    priority: 10,
                    enforce: true
                },
                /* 提取共用部分，一下提取的部分会议commons 命名 */
                commons: {
                    name: 'commons',
                    test: function (module, chunks) {
                        if (/src\/components\//.test(module.context) ||
                            /src\/util\//.test(module.context) ||
                            /react/.test(module.context) ||
                            /react-dom/.test(module.context) ||
                            /moment/.test(module.context) ||
                            /redux/.test(module.context)) {
                            return true
                        }
                    },
                    chunks: 'all',
                    minChunks: 2, //  提取公共部分最少的文件数
                    minSize: 0 // 提取公共部分最小的大小
                    // enforce: true
                }
            }
        },
        minimizer: [
            new TerserPlugin({  // 压缩js
                cache: true,
                parallel: true,
                terserOptions: {
                    compress: {
                        drop_console: true,
                        drop_debugger: true // 去除console.log 和debuger
                    },
                }
            })
        ]

    }
});
